<!-- 严重交通违法行为考核-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form" >
                <Col span="8">
                    <FormItem label="二级集团：">
                        <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="单位名称：" prop="order">
                      <!--                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                      <Input class="query-form-el" type="text" v-model="dataToQuery.companyName"></Input>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="季度：" prop="quarter">
                        <Select v-model="dataToQuery.quarter" placeholder="请选择季度">
                            <Option v-for="(option, index) in quarterList" :value="option.value" :key="index">{{option.label}}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="车牌号：" prop="plateNumber">
                        <Input class="query-form-el" type="text" v-model="dataToQuery.plateNumber"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                  <download-button :api="exportUrl" :query-form="dataToQuery"/>
                  <!--<Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal title="一车多起交通违法信息修改" :transfer=false v-model="model1" :width=600>
            <Row>
                <Col span="24">
                <Form ref="form1datacopy" :model="form1datacopy"  label-position="top">
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="单位名称：" prop="companyId">
                            <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%;" ref="carOrg"
                                @setOrgInfo="setOrgId" @setOrgName="setOrgName" :currentOrgId="form1datacopy.companyId"
                                :currentOrgName="form1datacopy.companyName" :orgTree="true"></cascaderDom>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                        <FormItem label="年份：" prop="year">
                            <Input type="text" v-model="form1datacopy.year"></Input>
                        </FormItem>
                        </Col>
                        <Col span="11">
                        <FormItem label="季度：" prop="quarter">
                            <Input type="text" v-model="form1datacopy.quarter"></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                        <FormItem label="车牌号：" prop="plateNumber">
                            <Input type="text" v-model="form1datacopy.plateNumber"></Input>
                        </FormItem>
                        </Col>
                        <Col span="11">
                        <FormItem label="编号：" prop="penaltyNum">
                            <Input type="text" v-model="form1datacopy.penaltyNum"></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="违法次数：" prop="violationNum">
                            <InputNumber v-model="form1datacopy.violationNum" :min="0" style="width: 100%;"></InputNumber>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="罚款金额/元：" prop="penalty">
                            <InputNumber v-model="form1datacopy.penalty" :min="0" style="width: 100%;"></InputNumber>
                        </FormItem>
                        </Col>
                    </Row>
                </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' :loading="buttonLoading" @click="submit('form1datacopy')">
                    确定
                </Button>
                <Button type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    export default {
        components:{cascaderDom},
        data(){
            return{
                ...this.createCommonDataField(),
                columns: [
                    { title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'belongOrgName',title: '单位名称',  align: 'center', minWidth: 200,render: (h, params) => {
                        return h('span', params.row.belongOrgName == null ? params.row.companyName : params.row.belongOrgName)}},
                    { key:'year',title: '年份',  align: 'center', minWidth: 70,  },
                    { key:'quarter',title: '季度',  align: 'center', minWidth: 80,
                        render: (h, params) => {return h('span', params.row.quarter+"季度");}},
                    { key:'plateNumber',title: '号牌号码',  align: 'center', minWidth: 120,  },
                    { key:'score',title: '违法扣分',  align: 'center', minWidth: 80,  },
                    { key:'penalty',title: '罚款金额/元',  align: 'center', minWidth: 100,  },
                    { key:'violationNum',title: '违法次数',  align: 'center', minWidth: 80,  },
                    { key:'penaltyNum',title: '编号',  align: 'center', minWidth: 80,
                        render: (h, params) => {return h('span', params.row.year+'-'+params.row.penaltyNum)}},
                    // this.getActionColumns(),
                    {title: '操作', key: 'action', fixed: 'right', width: 220, align: 'center',
                        render: (h, params) => {
                            return h('div', [
                            h('A', {
                                props: { type: 'primary', size: 'small' },
                                disabled: true,
                                style: { fontSize: '14px' },
                                on: {
                                    click: () => {
                                        this.editData(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Divider', { props: { type: 'vertical' } }, ''),
                            h('A', {
                                props: { type: 'primary', size: 'small' },
                                style: { fontSize: '14px', color: 'red' },
                                on: {
                                    click: () => {
                                        this.deleteData(params.row);
                                    }
                                }
                            }, '删除'),
                            h('Divider', { props: { type: 'vertical' } }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.downLoad(params.row);
                                        }
                                    }
                                }, '下载处罚单')
                            ]);
                        }
                    }
                ],
                tableHeight:10,
                dictMap: {},
                // api
                queryUrl:Api.querySaTraff.replace('{{table}}','penalty'),
                exportUrl:Api.exportSaTraff.replace('{{table}}','penalty'),
                deleteUrl:Api.deleteSaTraff.replace('{{table}}','penalty'),
                // getUrl:Api.getSaTraff.replace('{{table}}','penalty'),
                updateUrl:Api.updateSaTraff.replace('{{table}}','penalty'),
                // saveUrl:Api.saveSaTraff.replace('{{table}}','penalty'),
                // uploadUrl:Api.uploadSaTraff.replace('{{table}}','penalty'),
                form1datacopy: {},
            model1: false,
            buttonLoading: false,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),

                quarterList:[
                    {value: '一', label: '一季度'},
                    {value: '二', label: '二季度'},
                    {value: '三', label: '三季度'},
                    {value: '四', label: '四季度'}
                ],

            }
        },
        computed: {
            isResult() {
                return this.$route.name
            },
            columns1() {
                const columns = [...this.columns];
                const columns1 = []
                columns.forEach(item => {
                    if (this.isResult === 'saPenaltyMany') {
                        if (item.key !== 'score') {
                            columns1.push(item)
                        }
                    } else {
                        if (item.key !== 'violationNum') {
                            columns1.push(item)
                        }
                    }
                })
                return columns1
            },
        },
        async mounted() {
            this.setTableHeight();
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.query();
        },
        methods:{
            ...pageCommonFunction,

            downLoad(row){
                this.isSpin = true;
                this.$http.get(this.exportUrl.replace('list',row.penaltyId),{
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/msword"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = row.companyName + (row.penaltyType===3?"一车多起交通违法考核单.docx":"严重交通违法考核单.docx") //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.isSpin = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败");
                    this.isSpin = false;
                })
            },
            setOrgId(data) {
            this.form1datacopy.companyId = data[data.length - 1];
        },
        setOrgName(data) {
            this.form1datacopy.companyName = data;
        },
        submit(name) {
            console.log(this.updateUrl)
            this.buttonLoading = true;
            this.$http.post(this.updateUrl, this.form1datacopy).then((res) => {
              if (res.status === 200) {
                this.$Message.success('成功');
                this.model1 = false;
                this.query();
              }
              this.buttonLoading = false;
            })
        },
        handleCancel(){
            this.model1 = false;
        },
        /**
         * 编辑数据
         *
         * @param row 数据行对象
         * @returns 无返回值
         */
         editData(row) {
            this.form1datacopy =  JSON.parse(JSON.stringify(row));
            this.model1 = true;
        },
        /**
         * 删除数据
         *
         * @param row 表格行数据
         * @returns 无返回值
         */
        deleteData(row) {
            this.$http.delete(this.deleteUrl + "/" + row.penaltyId).then((res) => {
              this.$Message.success('删除成功');
              this.query();
            }).catch(e => {
              this.$Message.error("数据删除失败")
            });
        },
            query() {
                this.dataToQuery.penaltyType = 3
                this.queryAjax();
            },
            reset1() {
                this.dataToQuery = {
                    year1: new Date(),
                    year : new Date().getFullYear().toString(),
                    penaltyType: 3
                };
                if (this.$refs.queryOrgCascader) {
                    this.$refs.queryOrgCascader.resetCurrentOrg();
                }
                this.pagedata.currentPage=1
                this.query()
            },
            createEmptyDataToAdd(){
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName:this.currentUser.userName,
                    id:this.get_uuid(),
                    score: null,
                    // idFiles:[],

                }
            },
            // async afterDataToViewInit() {
            //     await this.getFiles('id');
            // },
        },
        watch: {
            '$route.name': function () {
                this.reset1()
            },
            "model1": function (qw, er) {
            if (qw && this.model1) {
                setTimeout(() => {
                    this.$refs.carOrg.setCurrentOrg();
                }, 100)
            } else {
                this.$refs.carOrg.setCurrentOrg();
            }
        },
        },
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>
